<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style type="text/css">
			*{
				margin: 0;
				padding: 0;
			}
			#box{
				display: flex;
			}
			.left{
				width: 100px;
				height: 100vh;
				background-color: lightgrey;
			}
			.left>div{
				height: 50px;
				background-color: skyblue;
				text-align: center;
				margin-bottom: 30px;
				line-height: 50px;
			}
			.right{
				width: 1000px;
				height: 100vh;
				margin: 0 auto;
				text-align: center;
			}
			table{
				width: 1000px;
				height: 30px;
				margin: 0 auto;
				table-layout: fixed;
				line-height: 30px;
			}
		</style>
	</head>
	<body>
		<div id="box">
			<div class="left">
				<div>
					<h3>首页</h3>
				</div>
				<div>
					<h3>信息录入</h3>
				</div>
				<div>
					<h3>展示</h3>
				</div>
			</div>
			<div class="right">
				<div>
					<h3>欢迎</h3>
				</div>
				<div>
					姓名：<input type="text"  id="user" value="" />
					密码：<input type="password" id="password" value="" />
					性别：
					<input type="radio" name="sex"  value="1"/>男<label for=""></label>
					<input type="radio" name="sex"  value="2"/>女<label for=""></label>
					学历：
					<select class="sel">
						<option>学士</option>
						<option>硕士</option>
						<option>博士</option>
					</select>
					<button type="button" class="btn">提交</button>
				</div>
				<div>
					<table border="1" cellspacing="0" cellpadding="0">
						<thead>
							<tr>
								<td>序号</td>
								<td>姓名</td>
								<td>密码</td>
								<td>性别</td>
								<td>学历</td>
								<td>操作</td>
							</tr>
						</thead>
						<tbody>
							<tr>
								<td>${i+1}</td>
								<td>${arr[i].user}</td>
								<td>${arr[i].password}</td>
								<td>getsexFn(${arr[i].sex})</td>
								<td>${arr[i].xw}</td>
								<td>
									<button type="button" onclick="del()">删除</button>
									<button type="button" onclick="xg(${arr[i].id},this)">修改</button>
								</td>
							</tr>
						</tbody>
					</table>
				</div>
			</div>
		</div>
	</body>
	<script type="text/javascript">
		var user=document.querySelector("#user");
		var password=document.querySelector("#password");
		var sexs=document.querySelectorAll("input[type='raidio']");
		var sel=document.querySelector(".sel");
		var btn=document.querySelector(".btn");
		
	</script>
</html>
